<style lang="less">
    @import '../../styles/common.less';
</style>

<template>
    <div>
        <Col span="24">
            <Card>
                <p slot="title">
                    <Icon type="android-menu"></Icon>
                    菜单管理
                </p>
                <Row>
                    <Row>
                        <Col span="15">
                            <Button style="width: auto;" icon="plus" type="primary"
                                    @click="openModal(null)" long>{{ $t('btnAddText') }}
                            </Button>
                            <Button type="success" icon="refresh" :loading="refreshLoading" @click="handleRefresh">刷新
                            </Button>
                            <Tooltip placement="top">
                                <i-switch size="large" v-model="props.isFold">
                                    <span slot="open">开启</span>
                                    <span slot="close">关闭</span>
                                </i-switch>
                                <div slot="content">
                                    <p>是否折叠所有的节点</p>
                                </div>
                            </Tooltip>
                        </Col>
                    </Row>
                    <br/>
                    <zk-table
                            ref="table"
                            sum-text="sum"
                            index-text="#"
                            :data="menuData"
                            :columns="columns"
                            :stripe="props.stripe"
                            :border="props.border"
                            :show-header="props.showHeader"
                            :show-summary="props.showSummary"
                            :show-row-hover="props.showRowHover"
                            :show-index="props.showIndex"
                            :tree-type="props.treeType"
                            :is-fold="props.isFold"
                            :expand-type="props.expandType"
                            :selection-type="props.selectionType">
                        <template slot="type" slot-scope="scope">
                            <span v-if="scope.row.menuType==0"><Icon type="grid"></Icon>&nbsp;菜单</span>
                            <span v-else><Icon type="android-radio-button-on"></Icon>&nbsp;按钮</span>
                        </template>
                        <template slot="icon" slot-scope="scope">
                            <span v-if="scope.row.menuIcon!=null && scope.row.menuIcon!=''"><Icon
                                    :type="scope.row.menuIcon"></Icon></span>
                            <span v-else>-</span>
                        </template>
                        <template slot="display" slot-scope="scope">
                            <span v-if="scope.row.display !=null && scope.row.display == 1">是</span>
                            <span v-else>否</span>
                        </template>
                        <template slot="action" slot-scope="scope">
                            <Button type="primary" @click="openModal(scope.row.id, 'edit', scope.row.menuName)"
                                    size="small">编辑
                            </Button>
                            <Button type="success" @click="openModal(scope.row.id, 'child', scope.row.menuName)"
                                    size="small">添加下级
                            </Button>
                            <Button type="error" @click="openModal(scope.row.id, 'delete', scope.row.menuName)"
                                    size="small">删除
                            </Button>
                        </template>
                    </zk-table>
                </Row>
            </Card>
            <AddMenu v-if="addMenuModal" @cancel="onModalCancel"/>
            <EditMenu v-if="editMenuModal" :menuId="menuId" :menuName="menuName" @cancel="onModalCancel"/>
            <AddChildMenu v-if="addChildModal" :menuId="menuId" :menuName="menuName" @cancel="onModalCancel"/>
            <DeleteMenu v-if="deleteMenuModal" :menuId="menuId" :menuName="menuName" @cancel="onModalCancel"/>
        </Col>
    </div>
</template>

<script>
    import AddMenu from './components/menu/addMenu.vue';
    import EditMenu from './components/menu/editMenu.vue';
    import AddChildMenu from './components/menu/addChildMenu.vue';
    import DeleteMenu from './components/menu/deleteMenu.vue';
    import {mapActions} from 'vuex';

    export default {
        name: 'menu-table',
        components: {
            AddMenu, EditMenu, AddChildMenu, DeleteMenu
        },
        data() {
            return {
                addMenuModal: false,
                addChildModal: false,
                deleteMenuModal: false,
                editMenuModal: false,
                menuId: '',
                menuName: '',
                refreshLoading: false,
                setting: {
                    loading: true,
                    showBorder: true
                },
                props: {
                    stripe: true,
                    border: true,
                    showHeader: true,
                    showSummary: false,
                    showRowHover: true,
                    showIndex: false,
                    treeType: true,
                    isFold: false,
                    expandType: false,
                    selectionType: false
                },
                menuData: [],
                columns: [
                    {
                        label: '菜单名称',
                        prop: 'menuName',
                        width: '300px'
                    },
                    {
                        label: '菜单键值',
                        prop: 'menuKey'
                    },
                    {
                        label: '类型',
                        prop: 'menuType',
                        type: 'template',
                        template: 'type'
                    },
                    {
                        label: '链接',
                        prop: 'menuUrl'
                    },
                    {
                        label: '文件位置',
                        prop: 'menuTarget'
                    },
                    {
                        label: '图标',
                        prop: 'menuIcon',
                        type: 'template',
                        template: 'icon',
                        width: '80px'
                    },
                    {
                        label: '请求方式',
                        prop: 'requestMethod',
                        width: '80px'
                    },
                    {
                        label: '是否显示',
                        prop: 'display',
                        template: 'display',
                        type: 'template',
                        width: '80px'
                    },
                    {
                        label: '排序',
                        prop: 'sort',
                        width: '80px'
                    },
                    {
                        label: '操作',
                        type: 'template',
                        prop: 'action',
                        template: 'action'
                    }
                ],
                removeObject: null
            };
        },
        methods: {
            ...mapActions(['getMenu']),
            handleGetMenu() {
                this.getMenu().then(res => {
                    if (res.data) {
                        this.menuData = res.data;
                    } else {
                        this.$Message.error(this.$t('queryDataFailed'));
                    }
                    this.refreshLoading = false;
                });
            },
            handleRefresh() {
                this.refreshLoading = true;
                this.handleGetMenu();
            },
            openModal(mid, type = 'add', name = '') {
                if (type === 'add') {
                    this.addMenuModal = true;
                } else if (type === 'child') {
                    this.menuId = mid;
                    this.menuName = name;
                    this.addChildModal = true;
                } else if (type === 'delete') {
                    this.menuId = mid;
                    this.menuName = name;
                    this.deleteMenuModal = true;
                } else if (type === 'edit') {
                    this.menuId = mid;
                    this.menuName = name;
                    this.editMenuModal = true;
                }
            },
            onModalCancel(type, reload = false) {
                switch (type) {
                    case 'add': {
                        this.addMenuModal = false;
                        break;
                    }
                    case 'child': {
                        this.menuId = '';
                        this.menuName = '';
                        this.addChildModal = false;
                        break;
                    }
                    case 'delete': {
                        this.menuId = '';
                        this.menuName = '';
                        this.deleteMenuModal = false;
                        break;
                    }
                    case 'edit': {
                        this.menuId = '';
                        this.menuName = '';
                        this.editMenuModal = false;
                        break;
                    }
                }
                if (reload) this.handleGetMenu();
            }
        },
        created() {
            this.handleGetMenu();
        }
    };
</script>
